<template>
  <div class="gb-hotparts">
    <div class="loading flex-box" v-if="!PartLists">
      <div class="loading-main">
        <loading/>
      </div>
    </div>
    <div class="hot-items-container" v-else>
      <div class="hot-items"  v-for="(items,indexs) in PartLists" :key="indexs">
        <div class="hot-banner" v-if="items.imgList">
          <img v-lazy="$BASEPATH+items.imgList[0].path" alt="banner01" />
        </div>
        <div class="hot-title" v-else>{{items.name}}</div>
        <div class="hot-content">
          <ul>
            <li v-for="(item,index) in items.allList" :key="index">
              <div class="img-box">
                <div class="img-box-inner flex-box">
                  <!-- <img v-if="activeView === index" :class="{'views-active':activeView === index}" v-lazy="$BASEPATH + item.img.path"> -->
                  <router-link :to="{ name: 'productdetail', params: { id: item.id }}" ><img v-if="item.img" v-lazy="$BASEPATH + item.img.path" /></router-link>
                </div>
              </div>
              <div class="des-box">
                <h4><a href="">{{item.name}}</a><span v-if="item.prodDesc">{{item.prodDesc}}</span></h4>
                <p>
                  <span>{{item.price}}</span>
                  <!-- <i><svg class="icon" aria-hidden="true" @click="addToCart(item,index)">
                      <use xlink:href="#icon-gb-gouwuche2"></use></svg></i> -->
                </p>
              </div>
            </li>
          </ul>
        </div>
        <button class="check-more" @click="toCategoryList(items.id)">
          查看更多
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-jiantou"></use>
            </svg>
          </span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import '@/assets/css/gb-index.scss'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      activeView: ''
    }
  },
  components: {},
  props: ['PartLists'],
  computed: {
    ...mapGetters({
      cartNum: 'cart/cartNum',
      hasGoods: 'cart/hasGoods'
    })
  },
  methods: {
    ...mapActions({
      createGoodsToCart: 'cart/create_goods_to_cart',
      addGoodsFromCart: 'cart/add_goods_from_cart'
    }),
    toCategoryList(link) {
      this.$router.push({ name: 'categorylists', params: { id: link } })
    }
    // addToCart(item, index) {
    //   let hasGoods = this.hasGoods(item)
    //   if (hasGoods) {
    //     //有，该商品的数量+1
    //     this.addGoodsFromCart(item)
    //     this.activeView = index
    //     setTimeout(() => {
    //       this.activeView = ''
    //     }, 500)
    //     // console.log(this.$store.state)
    //     // console.log(localStorage)
    //   } else {
    //     //没有，购物车创建该商品
    //     item.num = 1
    //     this.createGoodsToCart(item)
    //     this.activeView = index
    //     setTimeout(() => {
    //       this.activeView = ''
    //     }, 500)
    //     // console.log(this.$store.state)
    //     // console.log(localStorage)
    //   }
    //   // let target = this.$refs.thumb
    //   // this.$emit('addCart', target)
    // }
  },
  mounted() {
    // console.log(this.PartLists[0].allList[0].img.path)
    // $('.gb-navbreak li').click(function() {
    //   $('.gb-navbreak li').removeClass('active')
    //   $(this).addClass('active')
    //   var l = $(this)[0].offsetLeft
    //   var m = $('.gb-navbreak')[0].offsetWidth
    //   // var n = $('.gb-navbreak')[0].scrollLeft
    //   var s = l - m / 2 < 0 ? 0 : l - m / 2
    //   $('.gb-navbreak').animate({ scrollLeft: s }, 300)
    // })
  }
}
</script>
<style scoped lang="scss">
.gb-hotparts {
  width: 100%;
  text-align: left;
  padding-top: 8px;
  .loading {
    width: 100%;
    height: 270px;
    background: url('../../assets/img/list-bg.png') center no-repeat;
    background-size: 100% 100%;
    .loading-main {
      width: 100px;
      height: 100px;
      // background: rgba($color: #fff, $alpha: 0.5);
      border-radius: 12px;
      // box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
    }
  }
  .hot-items {
    width: 100%;
    margin-bottom: 28px;
    text-align: center;
    .hot-banner {
      width: 100%;
      padding-bottom: 45%;
      position: relative;
      img {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .hot-title {
      display: inline-block;
      height: 68px;
      text-align: center;
      font-size: 20px;
      color: #333;
      letter-spacing: 2px;
      position: relative;
      &::before,
      &::after {
        display: block;
        content: '';
        width: 24px;
        background: #999;
        height: 1px;
        top: 8px;
        position: absolute;
        z-index: 9;
      }
      &::before {
        left: -36px;
      }
      &::after {
        right: -32px;
      }
    }
    .hot-content {
      width: 100%;
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;
      margin-top: -24px;
      position: relative;
      z-index: 6;
      ul {
        display: block;
        overflow: hidden;
        width: 100%;
        background: #fff;
        box-sizing: border-box;
        border-radius: 6px;
        overflow: hidden;
        padding: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        li {
          width: 50%;
          float: left;
          padding: 3px 5px;
          box-sizing: border-box;
          margin-bottom: 4px;
          text-align: left;
          .img-box {
            width: 100%;
            padding-bottom: 100%;
            position: relative;
            .img-box-inner {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              a {
                width: 100%;
                height: 100%;
                background: url('../../assets/img/loading.gif') center no-repeat;
              }
              img {
                width: 100%;
              }
            }
          }
          .des-box {
            width: 100%;
            height: 42px;
            padding-top: 6px;
            padding-bottom: 6px;
            position: relative;
            h4,
            p {
              font-size: 12px;
              line-height: 14px;
              color: #333;
            }
            h4 {
              margin-bottom: 8px;
              height: 28px;
              a,
              span {
                font-size: 14px;
                line-height: 18px;
                height: 18px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #333;
                display: inline-block;
              }
              span {
                color: #bbb;
                font-size: 11px;
                height: 12px;
                line-height: 12px;
              }
            }
            p {
              color: #ff6363;
              width: 100%;
              font-weight: bold;
              display: inline-block;
              span {
                float: left;
              }
              i {
                float: right;
                margin-right: 3px;
                font-size: 18px;
                line-height: 18px;
                margin-top: -4px;
                color: #e1a757;
                text-align: right;
              }
            }
          }
          .des-box-last {
            height: 52px;
            h4 {
              height: 40px;
            }
          }
        }
      }
    }
    .check-more {
      text-align: center;
      width: 100%;
      display: block;
      font-size: 16px;
      color: #666;
      background: none;
      border: none;
      text-decoration: none;
      margin-top: 14px;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      -webkit-user-select: none;
      -moz-user-focus: none;
      -moz-user-select: none;
      span {
        font-size: 19px;
      }
    }
  }
  .views-active {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: zoomToCart;
    animation-name: zoomToCart;
  }
  @-webkit-keyframes zoomToCart {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 115px;
      left: 72px;
      -webkit-transform: scale3d(0.1, 0.1, 0.1);
      transform: scale3d(0.1, 0.1, 0.1);
    }
  }
  @keyframes zoomToCart {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 115px;
      left: 72px;
      -webkit-transform: scale3d(0.1, 0.1, 0.1);
      transform: scale3d(0.1, 0.1, 0.1);
    }
  }
}
</style>
